<template>
    <div class="my-pagination flex-center">
        <div class="total">共{{ total }}条</div>
        <div class="btn arrow" @click="handleBtn('up')">‹</div>
        <div class="btn" :class="currentPage==item?'active':''" @click="handleBtn(item)" v-for="(item,index) in pages" :key="index">{{ item }}</div>
        <div class="btn arrow" @click="handleBtn('next')">›</div>
        <div class="btn btn-right">共{{ page }}页</div>
    </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: () => 0,
        },
        currentPage: {
            type: Number,
            default: () => 1,
        },
        pageSize: {
            type: Number,
            default: () => 4,
        },
        maxVisible: {
            type: Number,
            default: () => 1,
        },
    },
    computed: {
        page(){
            return Math.ceil(this.total / this.pageSize)
        },
        pages(){
            return this.getPagination();
        }
    },
    methods: {
        handleBtn(type){
            if(type == 'up'){
                if(this.currentPage > 1){
                    this.$emit('change', this.currentPage - 1)
                }
            } else if(type == 'next'){
                if(this.currentPage < this.page){
                    this.$emit('change', this.currentPage + 1)
                }
            } else {
                this.$emit('change', type)
            }
        },
        getPagination() {
            let currentPage = this.currentPage
            let maxVisible  = this.maxVisible
            const totalPages = Math.ceil(this.total / this.pageSize);
            const pages = [];
            if (totalPages <= maxVisible + 4) {
                // 总页数太少，直接全部展示
                for (let i = 1; i <= totalPages; i++) pages.push(i);
                return pages;
            }

            pages.push(1); // 首页

            const half = Math.floor(maxVisible / 2);
            let start = currentPage - half;
            let end = currentPage + half;

            if (start <= 2) {
                start = 2;
                end = start + maxVisible - 1;
            }

            if (end >= totalPages - 1) {
                end = totalPages - 1;
                start = end - maxVisible + 1;
            }

            if (start > 2) {
                pages.push("...");
            }

            for (let i = start; i <= end; i++) {
                pages.push(i);
            }

            if (end < totalPages - 1) {
                pages.push("...");
            }

            pages.push(totalPages); // 末页

            return pages;
        }
    }
}
</script>

<style lang="less" scoped>
.my-pagination{
    justify-content: right;
    position: absolute;
    right: 16px;
    bottom: 20px;
    .total{
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #1FC6FF;
        white-space: nowrap;
    }
    .btn{
        user-select: none;
        padding: 0 8px;
        height: 24px;
        line-height: 20px;
        display: flex;
        justify-content: center;
        color: #fff;
        border: 1px solid #1FC6FF;
        font-weight: 300;
        font-size: 14px;
        margin-left: 10px;
        cursor: pointer;
        &.active{
            background: #1FC6FF;
        }
        &.arrow{
            font-weight: 100;
            font-size: 26px;
            line-height: 15px;
        }
        &.btn-right{
            white-space: nowrap;
            width: auto;
            padding: 0 10px;
            letter-spacing: 1px;
        }
    }
}
</style>